<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/aaa/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/aaa/layuiadmin/style/admin.css" media="all">

</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <button shiro:hasPermission="empadd" id="employee-addbtn" class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-search">
                            添加员工
                        </button>
                    </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">账号</label>
                            <div class="layui-input-block">
                                <input type="text" name="telephone" id="telephone" placeholder="请输入" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline" >
                            <button id="employee-searchbtn" class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="empfilter-search">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                            </button>
                        </div>
                </div>
        </div>

        <div class="layui-card-body">
            <table class="layui-hide" id="employee" lay-filter="employee-filter"></table>

            <script src="/aaa/layuiadmin/layui/layui.js"></script>
            <script src="/aaa/layuiadmin/layui/layui-xtree.js"></script>
            <script type="text/html" id="employee-bar">
                <a shiro:hasPermission="empedit" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="employee-detail">编辑</a>
                <a shiro:hasPermission="empper" class="layui-btn layui-btn-xs" lay-event="employee-edit">权限</a>
            </script>
            <!--   <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="employee-del">删除</a>-->
            <script type="text/html" id="employeestate-bar">
                {{#  if(d.state == 1){ }}
                <button class="layui-btn layui-btn-xs" lay-event="emp-stateq">启用中</button>
                {{#  } else { }}
                <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="emp-statej">已禁用</button>
                {{#  } }}
            </script>
        </div>
    </div>
</div>

<form class="layui-form" id="empform">
    <div id="employee-layer" style="display: none">
        <input id="employee-id" name="employeeid" type="hidden" autocomplete="off" class="layui-input">
        <div class="layui-form-item">
            <label class="layui-form-label">账户</label>
            <div class="layui-input-inline">
                <input type="text" id="employee-telephone" name="telephone" required disabled  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" id="employee-name" name="name" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" id="employee-tel" name="tel" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="text" id="employee-password" name="password" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="emp-save" id="emp-save">保存</button>
                </div>
            </div>
        </div>
    </div>
</form>



<div id="employeeRole-layer" style="display: none">
    <div class="layui-form-item">
        <form class="layui-form" >
            <div id="employee-xtree" class="xtree_contianer"></div>
        </form>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="button" value="保存" class="layui-btn" id="role-emp-save"/>
            </div>
        </div>
    </div>
</div>


<form class="layui-form" id="addempform">
    <input type="hidden" id="empschoolid" name="schoolid" th:value="${schoolid}">
    <div id="employee-addlayer" style="display: none;width: 360px">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账户</label>
            <div class="layui-input-inline">
                <input type="text" name="telephone" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="text" name="password" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">创建时间：</label>
            <div class="layui-input-inline">
                <input type="text" name="hiredate" id="hiredate" required  placeholder="yyyy-MM-dd" class="layui-input">
            </div>

        </div>
        <div class="layui-form-item">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="addemp-save">保存</button>
                </div>
            </div>
        </div>
    </div>
</form>


<script th:inline="none">
    layui.use(['table','form','laydate'], function(){
        var table = layui.table;
        var $ = layui.$;
        var form = layui.form;
        var laydate = layui.laydate;
        var employeextree;
        var employeelayer;
        var employeeaddlayer;
        var employeeRole;
        laydate.render({
            elem:'#hiredate',
            type:'datetime'
        });

        form.on('submit(empfilter-search)', function (data) {
            var field = data.field;
            //执行重载
            table.reload('employee', {
                where: field
            });
        });


        table.render({
            elem: '#employee',
            height:600,
            url: '/aaa/emp/getEmp',
            where:{id:$("#empschoolid").val()},
            page: true,
            cols: [
                [
                    {field:'employeeid',title:'员工id',align:'center'},
                    {field:'name',title:'姓名',align:'center'},
                    {field:'telephone',title:'账户',align:'center'},
                    {field:'password',title:'密码',align:'center'},
                    {field:'tel',title:'电话',align:'center'},
                    {field:'school',title:'门店',align:'center'},
                    {field:'hiredate',title:'入职时间',align:'center'},
                    {
                        field:'state',
                        title: '状态',
                        align:'center',
                        toolbar:'#employeestate-bar'
                    },
                {title:'操作',toolbar:'#employee-bar',align:'center'},
                ]
            ]
        });


        /*$('#employee-searchbtn').click(function () {
            table.reload('employee', {
                url: '/aaa/emp/getEmp',
                where: {
                    id:$("#telephone").val()
                } //设定异步数据接口的额外参数
                //,height: 300
            });
        });*/
        //添加员工按钮
        $('#employee-addbtn').click(function () {
            employeeaddlayer = layer.open({
                type: 1,
                title:'添加员工',
                content: $('#employee-addlayer')
            });
            document.getElementById("addempform").reset();
        });

        form.on('submit(emp-save)',function (data) {
            var field = data.field;
            $.ajax({
                url:'/aaa/emp/updateEmp',
                type:'POST',
                data:field,
                success:function (data) {
                    if(data.code==100){

                        layer.closeAll();
                        table.reload('employee');
                        layer.msg("修改成功");
                    }else{
                        layer.closeAll();
                        table.reload('employee');
                        layer.msg("修改失败");
                    }

                }
            });
            return false;
        });


        table.on('tool(employee-filter)', function(obj){
            var data = obj.data;
            if(obj.event === 'employee-detail'){
                $("#employee-telephone").val(data.telephone);
                $("#employee-password").val(data.password);
                $("#employee-tel").val(data.tel);
                $("#employee-name").val(data.name);
                $("#employee-id").val(data.employeeid);
                employeelayer = layer.open({
                    type: 1,
                    title:'员工信息',
                    content: $('#employee-layer')
                });
            } else if(obj.event === 'employee-edit'){
                $("#employee-id").val(data.employeeid);
                $.post({
                    url:'/aaa/emp/getAllRole',
                    data:{
                        id:data.employeeid
                    },
                },function (data) {
                    employeextree = new layuiXtree({
                        elem: 'employee-xtree'   //(必填) 放置xtree的容器，样式参照 .xtree_contianer
                        , form: form     //(必填) layui 的 from
                        , data: data     //(必填) json数据
                        , isopen: true  //加载完毕后的展开状态，默认值：true
                        , ckall: true    //启用全选功能，默认值：false
                        , ckallback: function () { } //全选框状态改变后执行的回调函数
                        , icon: {        //三种图标样式，更改几个都可以，用的是layui的图标
                            open: "&#xe625;"       //节点打开的图标
                            , close: "&#xe623;"    //节点关闭的图标
                            , end: "&#xe643;"      //末尾节点的图标
                        }
                        , color: {       //三种图标颜色，独立配色，更改几个都可以
                            //open: "#EE9A00"        //节点图标打开的颜色
                            //, close: "#EEC591"     //节点图标关闭的颜色
                            //, end: "#828282"       //末级节点图标的颜色
                        }
                        , click: function (data) {

                        }
                    });// xtree1  end
                })

                employeeRole = layer.open({
                    type: 1,
                    title:'员工权限',
                    area: ['300px', '300px'],
                    content: $('#employeeRole-layer')
                });
            }else if(obj.event === 'employee-del'){
                layer.confirm('确定删除该行数据？', function(index){
                    obj.del();
                    layer.close(index);
                });
            }else if(obj.event === 'emp-stateq'||obj.event === 'emp-statej'){
                    $.post({
                        url:'/aaa/emp/updateEmpState',
                        data:{
                            employeeid:data.employeeid,
                            state:data.state
                        },
                    },function (data) {
                        if(data.code==100){
                            layer.closeAll();
                            table.reload('employee');
                            layer.msg("修改成功");
                        }else {
                            layer.closeAll();
                            table.reload('employee');
                            layer.msg("修改失败");
                        }
                    })


            }
        });
        form.on('submit(addemp-save)',function (data) {
            var field = data.field;
            $.ajax({
                url:'/aaa/emp/addEmp',
                type:'POST',
                data:field,
                success:function (data) {
                    if(data.code==100){
                        layer.closeAll();
                        table.reload('employee', {
                            where: {id:$("#empschoolid").val()}
                        });
                        layer.msg("添加成功");
                    }else if(data.code==300){
                        layer.msg("该账户已存在");
                    }else{
                        layer.closeAll();
                        layer.msg("添加失败");
                    }

                }
            });
            return false;
        });

        //获取全部[选中的][末级节点]原checkbox DOM对象，返回Array
        $('#role-emp-save').click(function () {

            var empocks = employeextree.GetChecked(); //这是方法
            var emparray = new Array();
            for (var i = 0; i < empocks.length; i++) {
                emparray[i]=empocks[i].value;
            }

            $.post({
                url:'/aaa/emp/updateRole',
                traditional : true,
                data:{
                    array:emparray,
                    id:$("#employee-id").val()
                },
            },function (data) {
                if(data.code==100){
                    layer.closeAll();
                    //table.reload('employee');
                    layer.msg("保存成功");
                }else {
                    layer.closeAll();
                    //table.reload('employee');
                    layer.msg("保存失败");
                }
            })
        })

    });
</script>

</body>
</html>